<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import axios from 'axios';


const type = ref(''); //类型
const repairTime = ref<[Date | null, Date | null]>([null, null]);//时间
const fullName = ref('');//输入框内容
const currentPage = ref(1);//当前页码

// 分页相关状态
const pageNo = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 选项数据
const options = [
  { value: '', label: '类型' },
  { value: '电器', label: '电器' },
  { value: '管道', label: '管道' },
  { value: '木工', label: '木工' },
  { value: '其他', label: '其他' },
];

// 监视这些值的变化  在前端输出
watch([fullName, type, repairTime], () => {
  console.log(`Input: ${fullName.value}, Type: ${type.value}, Date Range: ${repairTime.value}`);
});

// 存储查询结果
const results = ref<Array<any>>([]);

// 表单提交方法
const handleSubmit = () => {
  // 提取日期范围
  const [startTime, endTime] = repairTime.value;
  const formattedStartTime = startTime ? startTime.toISOString() : null;
  const formattedEndTime = endTime ? endTime.toISOString() : null;

  console.log(`输入: ${fullName.value}, 类型: ${type.value}, 开始时间: ${formattedStartTime}, 截止时间: ${formattedEndTime}, 当前页: ${pageNo.value}`);

  axios.post('/api/admin/page10/selectpages', {
    fullName: fullName.value,
    type: type.value,
    startTime: formattedStartTime,
    endTime: formattedEndTime,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }).then(response => {
    console.log('API 响应数据:', response.data);
    results.value = response.data.records || [];
    total.value = response.data.total || 0;
  }).catch(error => {
    console.error('Error:', error.response ? error.response.data : error.message);
  });
};
// 页码改变方法
const handlePageChange = (page: number) => {
  pageNo.value = page;
  currentPage.value = page;
  handleSubmit();
};
// 调用函数挂载数据
onMounted(() => {
  handleSubmit();
});
</script>

<template>
    <img src="../../assets/aaa.png" style="width: 125px; height: 125px; position: absolute; top: 40px; left: 280px;">
    <div class="title">
      <h1>原神，启动！</h1>
    </div>
  <!-- 条件选择 -->
  <el-row class="selects">
    <div class="flex flex-wrap gap-4 items-center">
      <!-- 输入框 -->
      <el-input v-model="fullName" style="width: 240px;height: 33px" placeholder="请输入关键字"/>
      <!-- 类型 -->
      <el-select v-model="type" placeholder="类型" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <!-- 日期选择器 -->
      <el-date-picker
          v-model="repairTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="截止时间"
          format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY/MM/DD ddd"
          time-format="A hh:mm:ss"
      />
      <!-- 查询按钮 -->
      <el-button @click="handleSubmit" type="primary" round style="margin-left: 20px">查询</el-button>
    </div>
  </el-row>
  <!-- 数据展示 -->
  <el-table :data="results" class="lists" @selection-change="handleSelectionChange" border>
    <el-table-column prop="maintenanceRecordsId" label="序号" width="60"/>
    <el-table-column prop="fullName" label="用户名" width="80"/>
    <el-table-column prop="repairAddress" label="报修地址" width="150"/>
    <el-table-column prop="repairDetails" label="报修物件" width="150"/>
    <el-table-column prop="maintenanceStatus" label="维修状态" width="100"/>
    <el-table-column prop="repairTime" label="报修时间" width="150"/>
    <el-table-column prop="employeeId" label="维修员ID" width="150"/>
    <el-table-column prop="employeeName" label="维修员名称" width="150"/>
    <el-table-column prop="updateTime" label="更新时间" width="150"/>
  </el-table>

  <!-- 分页控件 -->
  <div class="example-pagination-block">
    <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
    />
  </div>

</template>

<style scoped>
.title {
  position: absolute;
  top: 75px;
  left: 400px;
  margin-top: 20px;
  margin-left: 10px;
  padding: 10px;
  font-size: 15px;
}

.selects {
  position: absolute;
  top: 200px;
  left: 460px;
}

.example-pagination-block {
  margin-top: 730px;
  display: flex;
  justify-content: center;
}
.lists {
  position: absolute;
  top: 260px;
  left: 360px;
  width: 77%;
  font-size: 15px;
  background-color: transparent; /* 修改背景颜色 */
}


</style>